<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>layout</title>
    <style>
      html * {
        padding: 0;
        margin: 0;
      }
      .layout article div {
        min-height: 100px;
      }
    </style>
  </head>
  <body>
    <!-- 浮动解决方案 -->
    <section class="layout float">
      <style>
        .float .one {
          float: left;
          width: 300px;
          background-color: red;
        }
        .float .two {
          background-color: yellow;
        }
        .float .three {
          float: right;
          width: 300px;
          background-color: blue;
        }
      </style>
      <h1>三栏布局</h1>
      <article>
        <div class="one"></div>
        <div class="three"></div>
        <div class="two">
          <h2>浮动解决方案</h2>
          1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
          3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
          5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
      </article>
    </section>

    <!--绝对定位  -->
    <section class="layout layout1">
      <style>
          .layout1 .one {
              position: absolute;
              left: 0;
              width: 300px;
              height: 100px;
              background-color: red;
          }
          .layout1 .three {
              position: absolute;
              right: 0;
              width: 300px;
              background-color: blue;
          }
          .layout1 .two {
              position: absolute;
              left: 300px;
              right: 300px;
              background-color: yellow;
          }
      </style>
      <h1>三栏布局</h1>
      <article>
        <div class="one"></div>
        <div class="two">
            <h2>绝对定位解决方案</h2>
            1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
            3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
            5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
        </div>
        <div class="three"></div>
      </article>
    </section>

    <!-- flexbox布局 -->
    <section class="layout layout2">
        <style>
            .layout2 {
                margin-top: 100px;
            }
            .layout2 article{
                display: flex;
            }
            .layout2 .one {
                width: 300px;
                background-color: red;
            }
            .layout2 .two {
                flex: 1;
                background-color: yellow;
            }
            .layout2 .three {
                width: 300px;
                background-color: blue;
            }
        </style>
        <h1>三栏布局</h1>
        <article>
            <div class="one"></div>
            <div class="two">
                <h2>flexbox解决方案</h2>
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
                3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
                5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
            <div class="three"></div>

        </article>
    </section>

    <!-- 表格布局 -->
    <section class="layout layout3">
        <style>
        .layout3 article {
            display: table;
            width: 100%;
            height: 100px;
        }
        .layout3 article > div {
            display: table-cell;
        }
        .layout3 .one {
            width: 300px;
            background-color: red;
        }
        .layout3 .two {
            background-color: yellow;
        }
        .layout3 .three {
            width: 300px;
            background-color: blue;
        }
        </style>
        <h1>三栏布局</h1>
        <article>
            <div class="one"></div>
            <div class="two">
                <h2>表格解决方案</h2>
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
                3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
                5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
            <div class="three"></div>
        </article>

    </section>

    <!-- 网格布局 -->
    <section class="layout layout4">
        <style>
            .layout4 article {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;

            }
            .layout4 article .one {
                background-color: red;
            }
            .layout4 article .two {
                background-color: yellow;
            }
            .layout4 article .three {
                background-color: blue;
            }
        </style>
        <h1>三栏布局</h1>
        <article>
            <div class="one"></div>
            <div class="two">
                <h2>网格解决方案</h2>
                1.这是三栏布局的浮动解决方案； 2.这是三栏布局的浮动解决方案；
                3.这是三栏布局的浮动解决方案； 4.这是三栏布局的浮动解决方案；
                5.这是三栏布局的浮动解决方案； 6.这是三栏布局的浮动解决方案；
            </div>
            <div class="three"></div>
        </article>
    </section>
  </body>
</html>
